<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="header :: jscssinclude"></head>
    <body>
        <div th:replace="header :: header_navigation"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-3" th:replace="control-menu :: control_navigation"></div>
                <div class="col-sm-9">
                    <h3> <span th:text="${screenTitle}">Title</span> </h3>
                    <form th:action="@{/updateTask}" method="post" class="needs-validation" id="updateTaskForm">
                        <input type="hidden" name="taskId" class="form-control" th:value="${task.id}" required>
                        <div class="form-row">
                            <div class="col-md-8 mb-3">
                                <label for="title">Task title</label>
                                <input type="text" name="title" class="form-control" id="title" th:value="${task.title}" required>
                                <div class="invalid-feedback">Please enter valid Task title</div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-8 mb-3">
                                <label for="detail">Task detail</label>
                                <textarea name="detail" class="form-control" id="detail"
                                          th:text="${task.detail}" cols="50" rows="10" required ></textarea>
                                <div class="invalid-feedback">Please enter valid Task Detail</div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-8 mb-3">
                                <label for="selectedUserId">Assigned To</label>
                                <input type="hidden" id="selectedUserId" name="selectedUserId" th:value="${task.assignedTo}">
                                <input type="text" name="selectedUserName" th:value="${task.assignedPerson}"
                                       class="form-control" id="selectedUserName" required>
                                <div class="invalid-feedback">Please select User</div>

                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#assignedToModel">
                                    Choose User
                                </button>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" id="btnUpdateTask">Update Task</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade" id="assignedToModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Select User</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close">Close</button>
                        <button type="button" class="btn btn-primary" id="chooseUserBtn">Choose User</button>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btnUpdateTask").click(function(event) {
                    fireFormValidation($("#updateTaskForm"));
                });
                $('#assignedToModel').on('show.bs.modal', function (e) {
                    jQuery.get('/getAllUsers', function(data, status){
                        var result=data;
                        $('#assignedToModel').find('.modal-body').html(result);
                    });
                });
                $("#chooseUserBtn").click(function(){
                    var selectedRadioNode = $("input[name='userName']:checked");
                    if(selectedRadioNode.val() === 'undefined'){
                        alert(" Please select user ..!! ");
                    }else{
                        var selectedUserId = $("input[name='userName']:checked").prev().val()
                        var selectedUser = $("input[name='userName']:checked").val();
                        $("#selectedUserName").val(selectedUser);
                        $("#selectedUserId").val(selectedUserId);
                        $('#close').trigger('click');
                    }
                });
            });
        </script>
    </body>
</html>